<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#section1">PSLab Remote Lab </a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li role="presentation">
            {{#link-to 'add-script' class='btn btn-primary btn-small'}}
              New Python Script
            {{/link-to}}
          </li>
          <li role="presentation" class="active">
            {{#link-to 'logout' class='btn btn-primary btn-small'}}
              Logout
            {{/link-to}}
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#section1">Your Scripts</a></li>
          <li><a href="#section2">Experiments</a></li>
          <li><a href="#section3">Function List</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>


<div class="contents" style="margin: 0 auto;width:95%;">
  <div>
    <div id="section1">
      <h3>
        Your Scripts
        <span class="label label-info" style="font-size:9pt;margin:10px;">{{model.length}}</span>
      </h3>
      <hr class="style1">
      <div class="row">
        <div class="col-md-12">
          <div class="panel-body">
            <ul id="myCodeList" class="list-group">
              <li class="list-group-item">
                <div class="checkbox">
                  <label>
                    {{input value=functionString type="text" class="form-control" placeholder="get_voltage('CH1')"}}
                  </label>
                  <button id="btnSignIn"
                          class="btn btn-md btn-primary"
                          disabled={{isProcessing}} {{action 'executeFunctionString' script on="click"}}>
                    Execute
                  </button>
                </div>
              </li>
              <br>

              {{#each model as |script|}}
                {{#unless script.readonly}}
                  <li class="list-group-item">
		                  <div class="pull-left action-buttons">
		                    <a {{action 'executeScript' script "Id" on="click"}} role="button">
		                      <span class="glyphicon glyphicon-step-forward"></span>
		                    </a>
		                  </div>
		                  <div class="checkbox">
		                    <label>
		                      {{script.Filename}}
		                    </label>
		                  </div>
		                  <div class="pull-right action-buttons">
		                    <a {{action "openEditModal" script on="click"}} role="button">
		                      <span class="glyphicon glyphicon-pencil"></span>
		                    </a>
		                    <a {{action 'showDeleteDialog' script on="click"}} role="button">
		                      <span class="glyphicon glyphicon-trash"></span>
		                    </a>
		                  </div>
                  </li>
                {{/unless}}    
              {{else}}
	                You haven't saved any scripts
              {{/each}}
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div id="section2">
      <h3>Selection of pre-written scripts for experiments</h3>
      <hr class="style1">
      <div class="row">
        <div class="col-md-12">
          <div class="panel-body">
            <ul id="myCodeList" class="list-group">
              {{#each model as |script|}}
                {{#if script.readonly}}
                  <li class="list-group-item">
                    <div class="pull-left action-buttons">
                      <a {{action 'executeScript' script "Filename" on="click"}} role="button">
                        <span class="glyphicon glyphicon-step-forward"></span>
                      </a>
                    </div>
                    <div class="checkbox">
                      <label>
                        {{script.Filename}}
                      </label>
                    </div>
                    <div class="pull-right action-buttons">
                      <a {{action 'openViewModal' script on="click"}} role="button">
                        <span class="glyphicon glyphicon-eye-open"></span>
                      </a>
                    </div>
                  </li>
                {{/if}}    
              {{else}}
                  No example scripts available
              {{/each}}
            </ul>
          </div>
        </div>
      </div>

    </div>

    <div id="section3">
      <h3>Function calls to access the hardware</h3>
      <hr class="style1">
    </div>
  </div>
</div>


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="text-align:center;">
        <h4 class="modal-title" style="color:red;" id="deleteModalLabel">
          You are going to delete
          <span style="color:blue;">{{deleteScriptName}}</span> forever !
        </h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" {{action 'deleteScript'}}>Delete</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="resultsModal" tabindex="-1" role="dialog" aria-labelledby="resultsModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="text-align:center;">
        <h4 class="modal-title" style="color:black;" id="resultsModalLabel">{{functionStringResults}}</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog-full">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="editModalLabel">Update Script</h4>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <form id="contentForm" class="form-horizontal">
              {{input disabled=true type="text" value=inputTitle class="form-control" placeholder="Filename/Description"
                      required=true autofocus=true}}
              {{ember-ace lines=20  theme="ace/theme/cobalt" mode="ace/mode/python" value=editorContents
                          update=(action (mut inputDescription))}}
              <button disabled={{isProcessing}} id="singlebutton" class="btn btn-primary" {{action "updateScript" on="click"}}>Update</button>
            </form>
            {{#if updateDone}}
              <div class="alert alert-info">{{updateMessage}}</div>
            {{/if}}
            {{#if submitFailed}}
              <div class="alert alert-danger">{{failedMessage}}</div>
            {{/if}}
            {{#if isSlowConnection}}
              <div class="alert alert-info">Submission seems to be taking more time than usual, please wait.</div>
            {{/if}}

          </div>
        </form>
      </div>

    </div>
  </div>
</div>


<div class="modal" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
  <div class="modal-dialog-full">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="viewModalLabel">{{viewModalTitle}}</h4>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <form id="contentForm" class="form-horizontal">
              {{ember-ace lines=30  theme="ace/theme/cobalt" mode="ace/mode/python" value=viewContents aceInit=viewAceInit}}
              <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">Close</button>
            </form>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>






<div class="modal" id="runModal" tabindex="-1" role="dialog" aria-labelledby="runModalLabel" aria-hidden="true">
  <div class="modal-dialog-full">
    <div class="modal-content">
      <div class="modal-header">
        <div class="row">
          <div class="col-sm-4"><span class="modal-title" id="runModalLabel">Execute results: </span></div>
          <div class="col-sm-4"><img alt="loading.gif" src="../static/images/loading.gif" id="executing-indicator" style="display:none;"></div>
          <div class="col-sm-2 pull-right">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          </div>
        </div>
      </div>
      <div class="modal-body">

        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#appTab" aria-controls="appTab" role="tab" data-toggle="tab">Application</a></li>
          <li role="presentation"><a href="#sourceTab" aria-controls="sourceTab" role="tab" data-toggle="tab">Source Code</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="appTab">
            <form role="form">
              <div class="form-group">
                <div style="min-height:40px;min-width:400px;" id="runResults">

                  {{#each codeResults as |element|}}
                    {{#if (eq element.type 'input')}}
                      <label id="{{element.labelname}}" class="{{element.class}}">{{element.label}}</label>
                      {{input id=element.name}}
                    {{/if}}
                    {{#if (eq element.type 'label')}}
                      <label id="{{element.name}}" class="{{element.class}}">{{element.value}}</label>
                    {{/if}}
                    {{#if (eq element.type 'button')}}
                      <button id="{{element.name}}" class="btn btn-small btn-primary" {{action 'runButtonAction' element.action}}>{{element.label}}</button>
                    {{/if}}
                    {{#if (eq element.type 'text')}}
                      {{element.value}}<br>
                    {{/if}}
                    {{#if (eq element.type 'span')}}
                      <div class="{{element.class}}"><span id="{{element.name}}">{{element.value}}</span></div>
                    {{/if}}
                    {{#if (eq element.type 'plot')}}
                      {{jqplot-graph data=element}}
                    {{/if}}

                  {{/each}}


                </div>
              </div>
            </form>
          </div>
          <div class="tab-pane" id="sourceTab">
            <textarea style="width:100%;min-height:400px;">{{ sourceCode }}</textarea>
          </div>
        </div>

      </div>

      {{#if waitingForCode}}
        <div class="alert alert-info">Waiting for the server to execute your code and respond. please wait.</div>
      {{/if}}

      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{{outlet}}
